<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input id="classType" name="classType" class="form-control" type="hidden" th:value="${indexClassType.classTypeId}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">首页一级分类名称：</label>
                            <div class="col-sm-10">
                                <input id="classTypeName" name="classTypeName" class="form-control" type="text" th:value="${indexClassType.classTypeName}" readonly="readonly">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">首页二级分类名称：</label>
                            <div class="col-sm-10">
                                <input id="indexClassName" name="indexClassName" class="form-control" type="text" maxlength="20" placeholder="">
                            </div>
                        </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">首页分类子标题：</label>
                                <div class="col-sm-10">
                                    <input id="childName" name="childName" class="form-control" type="text" maxlength="15" placeholder="" >
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">上传封面图片：</label>
                                <div class="col-sm-10">
                                    <input @change="fileUpload1($event)" accept="image/*" type="file">
                                </div>
                            </div>
                            <div class="form-group" id="cardDiv1" v-if="picUrlDataURL">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <img :src="picUrlDataURL" alt="轮播图图片" class="img-responsive img-thumbnail"
                                         style="height: 80px;width: 120px">
                                    <input type="hidden" name="picUrl" id="picUrl" >
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">上传log图片：</label>
                                <div class="col-sm-10">
                                    <input @change="fileUpload2($event)" accept="image/*" type="file">
                                </div>
                            </div>
                            <div class="form-group" id="cardDiv2" v-if="logoUrlDataURL">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <img :src="logoUrlDataURL" alt="轮播图图片" class="img-responsive img-thumbnail"
                                         style="height: 80px;width: 120px">
                                    <input type="hidden" name="logoUrl" id="logoUrl" >
                                </div>
                            </div>

                        <div class="text-right form-group">
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    $().ready(function () {
        validateRule();
    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });


    // 上传图片
    const vue = new Vue({
        el: '#signupForm',
        data: {
            reqData: {},
            picUrlDataURL: '',
            logoUrlDataURL: '',
        },
        methods: {
            fileUpload1: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.picUrlDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#picUrl").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            },
            fileUpload2: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.logoUrlDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#logoUrl").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            }
        }

    });


    function save() {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/app/indexClassCfg/save",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            success: function (data) {
                layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                indexClassName: {
                    required: true,
                    remote : {
                        url : "/app/indexClassCfg/indexClassCfgNameExit", // 后台处理程序
                        type : "post", // 数据发送方式
                        dataType : "json", // 接受数据格式
                        data : { // 要传递的数据
                            indexClassName : function() {
                                return $.trim($("#indexClassName").val());
                            },
                            classType:function () {
                                return $("#classType").val();
                            }
                        }
                    }
                },
                classTypeName:{
                    required: true
                }
            },
            messages: {
                indexClassName: {
                    required: icon + "必填",
                    remote : icon + "名称已存在"
                },
                classTypeName:{
                    required: icon + "必填"
                }
            }
        })
    }

</script>
</body>
</html>